<template>
	<view class="container">
		<view v-if="data">
			<uni-list :border="false" class="uhead">
				<uni-list-item :thumb="data.avatar ? convertAvatar(data.avatar) : '/static/txl/ico_logo_@3x.png'"
					thumb-size="lg">
					<view slot="body">
						<view class="uni-list-item__content">
							<text class="re-ufont">{{ data.userName }}</text>
							<text class="re-uni-list-item__content-note">{{
                data.wxUserId
              }}</text>
						</view>
					</view>
				</uni-list-item>
			</uni-list>
			<uni-list>
				<uni-list-item>
					<template slot="header">
						<image class="slot-image" src="/static/txl/ico_page_@3x.png" mode="widthFix"></image>
					</template>
					<view slot="body">
						<text class="re-uni-list-item__content-title ufont">基础信息</text>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body">
						<view class="re-uni-list-item__content">
							<text class="re-uni-list-item__content-note">姓名</text>
							<text class="re-uni-list-item__content-title">{{
                data.userName
              }}</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body">
						<view class="re-uni-list-item__content">
							<text class="re-uni-list-item__content-note">所在部门</text>
							<text class="re-uni-list-item__content-title">{{
                data.deptName
              }}</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body">
						<view class="re-uni-list-item__content">
							<text class="re-uni-list-item__content-note">岗位</text>
							<text class="re-uni-list-item__content-title">{{
                data.roleType
              }}</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body">
						<view class="re-uni-list-item__content">
							<text class="re-uni-list-item__content-note">联系电话</text>
							<text class="re-uni-list-item__content-title">{{
                data.phone
              }}</text>
						</view>
					</view>
				</uni-list-item>
				<uni-list-item>
					<view slot="body">
						<!-- <view class="re-uni-list-item__content">
							<text class="re-uni-list-item__content-note">邮箱</text>
							<text class="re-uni-list-item__content-title">{{
                data.email
              }}</text>
						</view> -->
					</view>
				</uni-list-item>
			</uni-list>

			<!-- <view class="message-button">
				<view class="button" @click="sendMessage()"> 发送消息 </view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getUsers
	} from '@/api/user.js'
	import {
		getWxUserInfo
	} from '@/api/user.js'

	export default {
		data() {
			return {
				department: '',
				ContactsEdit: "",
				id: "",
				userId: '',
				data: {},
				pic: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png",
				queryWhere: "",
				loadMore: {
					contentdown: "",
					contentrefresh: "",
					contentnomore: "",
				}
			};
		},

		onLoad(e) {
			this.userId = e.id;
			this.department = e.department;
			
			this.getUser(e.id);

		},
		methods: {
			convertAvatar(avatar) {
				return avatar.replace('http://localhost:18000/manage', getApp().globalData.baseUrl)
			},
			//发送消息
			async sendMessage() {
				let chat = {
					type: 'PRIVATE',
					targetId: this.data.id,
					showName: this.data.nickname,
					headImage: this.data.avatar,
				};
				this.$store.commit("openChat", chat);
				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=0"
				})
			},
			async getUser(id) {
				var res = null;
				try {
					res = await getWxUserInfo({

						wxUserId: id //'1810874774579933185' //

					});
					this.data = res.data

				} catch (err) {

				}
			},
			handleUpdate() {

			}
		},
	};
</script>

<style>
	.container {
		width: 100%;
		background-color: #f5f5f5;
	}

	.uhead {
		margin-bottom: 20rpx;
	}

	.editlist {
		width: 100%;
		padding: 4rpx 0 4rpx 6rpx;
	}

	.editbtn {
		color: #666666;
		font-family: PingFang SC;
		font-weight: medium;
		font-size: 15px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
	}

	.re-uni-list-item__content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		overflow: hidden;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.re-uni-list-item__content--center {
		justify-content: center;
	}

	.re-uni-list-item__content-note {
		margin-top: 6rpx;
		margin-bottom: 6rpx;
		color: #999999;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 15px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
	}

	.re-uni-list-item__content-title {
		color: #333333;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 15px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
	}

	.re-ufont {
		color: #333333;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 17px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
		padding-bottom: 12rpx;
		padding-top: 10rpx;
	}

	.ufont {
		font-weight: bold;
	}

	.message-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #ccc;
	}

	.button {
		width: 80%;
		height: 100rpx;
		background-color: #3b89f5;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
	}
</style>